<template>
  <div class="home">
    <!-- 头部 -->
      <Myhead></Myhead>
    <div class="conent">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" indicator-color="white">
        <Myswipe v-for="(item, i) in banner" :key="i" :item="item"></Myswipe>
      </van-swipe>
       <!-- 九宫格导航栏 -->
    <homeNav></homeNav>

      <!-- 全屋装修 -->
      <div class="box">
        <div class="qwzx">
          <span class="zhu"></span>
          <h3>全屋装修</h3>
          <span class="qwzx-zi">包设计、包主材、包水电、包施工</span>
        </div>
        <div class="img1">
          <van-swipe :autoplay="3000" indicator-color="white">
            <Myswipe
              v-for="(item, i) in quanwu"
              :key="i"
              :item="item"
            ></Myswipe>
          </van-swipe>
          <div class="bottom">
            <span
              ><span class="bootomi1 iconfont icon-zero"></span
              >0增项，标准施工</span
            >
            <span
              ><i class="bootomi iconfont icon-protection-fill"></i
              >杜绝项目外包</span
            >
            <span><i class="bootomi iconfont icon-price"></i>装修贷款</span>
          </div>
        </div>
      </div>
      <!-- 局部装修 -->
      <div class="box">
        <div class="jbzx">
          <span class="zhu"></span>
          <h3>局部装修</h3>
          <span class="qwzx-zi">包设计、包主材、包水电、包施工</span>
        </div>
      </div>
      <div class="img1">
        <van-swipe :autoplay="3000" indicator-color="white">
          <Myswipe v-for="(item, i) in jubu" :key="i" :item="item"></Myswipe>
        </van-swipe>
        <div class="bottom">
          <span
            ><span class="bootomi1 iconfont icon-zero"></span
            >0增项，标准施工</span
          >
          <span
            ><i class="bootomi iconfont icon-protection-fill"></i
            >杜绝项目外包</span
          >
          <span><i class="bootomi iconfont icon-price"></i>装修贷款</span>
        </div>
      </div>
      <!--装修预约  -->
      <div class="qwzx">
        <span class="zhu"></span>
        <h3>装修预约</h3>
        <span class="qwzx-zi">免费上门量房，实际方案满意为止</span>
      </div>
      <div class="from-box">
        <div class="from-bo">
          <div class="from">
            <van-field class="in" label="小区名" />
            <van-field class="in" label="手机号" />
            <van-field class="in" label="建筑面积" />
            <button class="btn">立即申请</button>
          </div>
        </div>
      </div>
      <!-- 设计师 -->
      <div class="box">
        <div class="qwzx" @click="gotoDevsjs">
          <span class="zhu"></span>
          <h3>设计师</h3>
        </div>
        <van-swipe class="my-swipe" :autoplay="3000">
          <van-swipe-item>
            <ul class="designer">
              <li v-for="item in list" :key="item.id">
                <img :src="item.img" alt="" />
                <span>{{ item.name }}</span>
                <div>{{ item.level_name }}</div>
              </li>
            </ul>
          </van-swipe-item>
          <van-swipe-item>
            <ul class="designer">
              <li v-for="item in list1" :key="item.id">
                <img :src="item.img" alt="" />
                <span>{{ item.name }}</span>
                <div>{{ item.level_name }}</div>
              </li>
            </ul>
          </van-swipe-item>
        </van-swipe>
        <div class="genduo">
          <div>换一换 <i class="iconfont top-i icon-change"></i></div>
          <div @click="gotoDevsjs">
            更多设计师<i class="iconfont top-i icon-more"></i>
          </div>
        </div>
      </div>
      <!-- 效果图 -->
      <div class="rendering">
        <div class="qwzx">
          <span class="zhu"></span>
          <h3>效果图</h3>
        </div>
        <div class="image">
          <img
            src="http://img.sirfang.com/effect_img/2020/10/19/72c0d640244c7e195f30661c44f5f5e7.jpg"
            alt=""
          />
          <div class="one">
            <img
              src="http://img.sirfang.com/effect_img/2020/10/19/5cb8ae4f30abaaa665350b0dce2e22cf.jpg"
              alt=""
            />
            <img
              src="http://img.sirfang.com/effect_img/2020/10/19/433d3f94339a2f5cf79509cbb4cebf9e.jpg"
              alt=""
            />
          </div>
          <div class="one">
            <img
              src="http://img.sirfang.com/effect_img/2020/10/19/d0a30c3a26e2f1de5480c5961036d0b2.jpg"
              alt=""
            />
            <img
              src="http://img.sirfang.com/effect_img/2020/10/19/433d3f94339a2f5cf79509cbb4cebf9e.jpg"
              alt=""
            />
          </div>
        </div>
        <div class="genduo">
          <div>换一换 <i class="iconfont top-i icon-change"></i></div>
          <div @click="dotoXiaoguo">
            更多效果图<i class="iconfont top-i icon-more"></i>
          </div>
        </div>
      </div>
      <!-- 工地直播 -->
      <div class="Sitelive">
        <div class="qwzx">
          <span class="zhu"></span>
          <h3>工地直播</h3>
        </div>
        <img
          class="zhiboimg"
          src="http://img.sirfang.com/decorate_plan/2020/08/18/052041392cbedb544c23cd4b415437c7.jpg"
          alt=""
        />
        <p>重汽嘉泽苑7幢 <span class="span1">泥木工程</span></p>
        <div class="genduo">
          <div>换一换 <i class="iconfont top-i icon-change"></i></div>
          <div @click="gotoZhibo">更多工地直播<i class="iconfont top-i icon-more"></i></div>
        </div>
      </div>
      <!-- 装修攻略 -->
      <div class="strategy">
        <div class="qwzx">
          <span class="zhu"></span>
          <h3>装修攻略</h3>
        </div>
        <div v-for="item in data" :key="item.id" class="hose">
          <img :src="item.img" alt="" />
          <div>
            <p>{{ item.title }}</p>
            <p class="shijian">
              <i class="iconfont top-i icon-time"></i>{{ item.edit_time }}
              <span>
                <i class="iconfont top-i icon-view"></i>{{ item.view_num }}
              </span>
            </p>
          </div>
        </div>
        <div class="genduo">
          <div>换一换 <i class="iconfont top-i icon-change"></i></div>
          <div @click="gotoGonhlue">更多装修攻略<i class="iconfont top-i icon-more"></i></div>
        </div>
      </div>
      <!-- 尾部 -->
      <Myfoot></Myfoot>
    </div>
  </div>
</template>
<script>
import homeNav from '@/components/homeNav'
import Myswipe from "../components/MySwiper.vue";
import Myhead from "@/components/Myhead";
import Myfoot from "@/components/Myfoot";
export default {
  data() {
    return {
      list: [], //设计师列表
      list1: [],
      data: [], //装修攻略列表
      banner: [
        {
          img: "/切图/banner.jpg",
        },
        {
          img: "/切图/banner1.jpg",
        },
        {
          img: "/切图/banner2.jpg",
        },
        {
          img: "/切图/banner3.jpg",
        },
      ], //首页banner轮播列表
      quanwu: [], //全屋装修列表
      jubu: [], //局部装修列表
    };
  },
  components: {
    homeNav,
    Myswipe,
    Myhead,
    Myfoot,
  },
  created() {
    this.$http.get("/home/shejishi").then((res) => {
      console.log(res.data.list);
      this.list = res.data.list;
      this.list = res.data.list.splice(0, 4);
      this.list1 = res.data.list.splice(0, 4);
    });
    this.$http.get("/home").then((res) => {
      console.log(res.data.plan);
      this.quanwu = res.data.plan.quanwuzhuangxiu;
    });
    this.$http.get("/home").then((res) => {
      console.log(res.data.plan);
      this.jubu = res.data.plan.jubuzhuangxiu;
    });
    this.$http.get("/home/gonglue").then((res) => {
      // console.log(res.data);
      this.data = res.data.list.splice(0, 4);
    });
  },
  methods: {
       gotoDevsjs() {
      this.$router.push("/devsjs");
    },
    gotoGonhlue() {
      this.$router.push("/gonglue");
    },
    dotoXiaoguo() {
      this.$router.push("/xiaoguo");
    },
    gotoZhibo() {
       this.$router.push("/zhibo");
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  width: 375px;
  box-sizing: border-box;
  overflow: hidden;
}
.from-box {
  width: 100%;
  // overflow: hidden;
  height: 204px;
  background-color: #fff;
  .from {
    width: 70%;
    height: 92%;
    margin: auto;
    margin-top: -8px;
    .in {
      margin: 5px 0;
      border: 1px solid #cacaca;
      border-radius: 5px;
    }
  }
  .btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin: 3px 0;
    font-size: 18px;
    color: whitesmoke;
    background-color: #eed215;
    border-radius: 5px;
    border: none;
    // margin-bottom: 36px;
  }
}
.img1 {
  width: 100%;
  // background-color: #fff;
  img {
    width: 100%;
    margin-bottom: 10px;
  }
}
.bootomi1 {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  color: #39c894;
  font-size: 16px;
  margin: 0 3px;
}
.bootomi {
  // border: 2px solid #39c894;
  border-radius: 50%;
  padding: 3px;
  width: 10px;
  height: 10px;
  color: #39c894;
  font-size: 16px;
  margin: 0 3px;
}
.qwzx {
  width: 100%;
  height: 52px;
  margin-top: 20px;
  display: flex;
  background-color: #fff;
  line-height: 36px;
  h3 {
    margin: 0;
    padding: 0;
    margin: 8px;
    font-size: 18px;
  }
  .qwzx-zi {
    color: #eaeaea;
    margin-top: 15px;
    font-size: 12px;
  }
  .zhu {
    margin: 9px 5px;
    height: 21px;
    width: 3px;
    margin-top: 15px;
    color: #39c894;
    display: inline-block;
    background-color: #39c894;
  }
}
.jbzx {
  width: 100%;
  height: 52px;
  margin-top: 20px;
  display: flex;
  background-color: #fff;
  line-height: 36px;
  h3 {
    margin: 0;
    padding: 0;
    margin: 8px;
    font-size: 18px;
  }
  .qwzx-zi {
    color: #eaeaea;
    margin-top: 15px;
    font-size: 12px;
  }
  .zhu {
    margin: 9px 5px;
    height: 21px;
    width: 3px;
    margin-top: 15px;
    color: #39c894;
    display: inline-block;
    background-color: #39c894;
  }
}
.zhiboimg {
  width: 100%;
  height: auto;
}

.top,
.right {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
.left {
  img {
    margin-left: 18px;
    margin-top: 16px;
    width: 120px;
    margin-bottom: 16px;
  }
}
.right {
  p {
    margin: 5px 10px;
  }
  text-align: center;
  .r-zi {
    font-size: 18px;
    color: #999;
  }
  .top-i {
    font-size: 22px;
    color: #999;
    margin: 10px 0;
  }
}
.bottom {
  margin-bottom: 10px;
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  width: 100%;
    display: flex;
    justify-content: space-around;
}
.my-swipe {
  background-color: #fff;
}
.designer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // padding: 0 10px;
  background-color: #fff;
  li {
    text-align: center;
    width: 24%;
    img {
      border-radius: 50%;
      width: 100%;
      height: auto;
    }
    div {
      width: 100%;
      background-color: #39c893;
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
      border-radius: 6px;
      color: #fff;
    }
  }
}
.genduo {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  background-color: #fff;
  div {
    border: 1px solid;
    width: 48%;
    border-radius: 6px;
    line-height: 35px;
    text-align: center;
    color: #51d0a2;
    margin-bottom: 10px;
  }
}
.image {
  width: 100%;
  background-color: #fff;
  // padding: 10px;
  img {
    padding: 0px 5px;
    width: 100%;
    height: 210px;
  }
  .one {
    margin-top: 5px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    // padding: 0 5px;
    margin: 0 5px;
    img {
      flex-basis: 49%;
      height: 100px;
    }
  }
}
.Sitelive {
  width: 100%;
  background-color: #fff;
  p {
    span {
      display: inline-block;
      width: 80px;
      line-height: 20px;
      color: #fff;
      background-color: #38c893;
      border-radius: 6px;
      text-align: center;
    }
  }
}
.strategy {
  width: 100%;
  background-color: #fff;
  .hose {
    width: 100%;
    display: flex;
    img {
      flex-basis: 25%;
      height: 100px;
      width: 100px;
    }
    div {
      flex-basis: 85%;
      .shijian {
        color: #cacaca;
        margin-top: 30px;
        margin-left: 5px;
        span {
          margin-left: 50px;
        }
      }
    }
  }
}
.conent {
  height: calc(100% - 60px);
  overflow: auto;
  width: 100%;
}
.header {
  height: 60px;
}
</style>
